<template>
    <div class="contain">
        <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" map-type="BMAP_HYBRID_MAP"
            @click="handleMapClick" @ready="handleMapReady">
            <!-- <bm-navigation :position="center" animation="BMAP_ANIMATION_DROP"></bm-navigation> -->
            <bm-marker :position="mapCenter" animation="BMAP_ANIMATION_DROP"></bm-marker>
        </baidu-map>
    </div>
</template>
<script>

import { BmlMarkerClusterer } from "vue-baidu-map";
export default {
    name: "Map",
    components: {
        BmlMarkerClusterer,
    },
    props: {
        lnglatForm: {
            type: Object,
            default: () => ({})
        },
        dialogVisible: {
            type: Boolean,
        },
        lng: {
            type: Number,
        },
        lat: {
            type: Number,
        },
    },
    data() {
        return {
            center: {
                lng: 120.09451661,
                lat: 30.89896394
            },
            zoom: 17,
            mapCenter: {},
            mapInstance: null
        };
    },
    watch: {
        lat(v) {
            this.center.lat = v;
            this.mapCenter.lat = v;
        },
        lng(v) {
            this.center.lng = v;
            this.mapCenter.lng = v;
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        handleMapClick(e) {
            this.mapCenter = { lng: e.point.lng, lat: e.point.lat };
            this.$emit('getMapCenter', this.mapCenter)
        },
        handleMapReady({ BMap, map }) {
            this.mapInstance = map;
            if (!(this.lat || this.lng)) {
                this.getCurrentLocation();
            } else {
                this.mapCenter = this.center = { lng: this.lng, lat: this.lat };
            }
        },
        getCurrentLocation() {
            const geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition((r) => {
                const currentPosition = r.point || {};
                if (currentPosition.lng && currentPosition.lat) {
                    this.mapCenter = { lng: currentPosition.lng, lat: currentPosition.lat };
                    this.zoom = 18; // 可以根据需要调整缩放级别
                    this.$emit('getMapCenter', this.mapCenter)
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.contain {
    width: 100%;
    height: 100%;
    position: relative;

    .map {
        width: 100%;
        height: 100%;
    }
}

::v-deep .BMap_cpyCtrl {
    display: none;
}

::v-deep .BMap_shadow {
    display: none;
}

::v-deep .anchorBL {
    display: none;
}

::v-deep .BMap_Marker {
    div {
        // display: none;
    }
}

::v-deep .BMap_noprint {
    display: block;
}

::v-deep .BMap_cpyCtrl {
    display: none;
}

::v-deep .map {
    >div:first-child {
        >div:first-child {
            >div:nth-child(2) {
                div:nth-last-child(3) {
                    display: none;
                }
            }
        }
    }
}
</style>